<script src="../../api/auctionGrade.js"></script>
<template>
    <div class="distribution-list">
        <el-card class="box-card">

            <!--&lt;!&ndash; 开启功能 &ndash;&gt;-->
            <!--<div style="display: flex;justify-content: space-between;align-items: center; border: 1px solid #edf0f4; background:#f9f9f9; padding: 15px; margin-bottom: 30px;">-->
                <!--<div style="display: flex; align-items: center;">-->
                    <!--<i class="el-icon-warning" style="color: #1890FF;font-size: 30px;" />-->
                    <!--<span style="display: inline-block; text-align: center; font-size: 16px; margin-left: 5px;">{{ distributionSwitch? '已开启': '未开启' }}</span>-->
                <!--</div>-->
                <!--<div>-->
                    <!--<el-button v-permission="['distribution.add']" type="primary" plain @click="distributionSwitchFn">{{-->
            <!--distributionSwitch? '关闭分销功能': '开启分销功能' }}-->
                    <!--</el-button>-->
                <!--</div>-->
            <!--</div>-->

            <!-- 标题 -->
            <el-row style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; height: 40px;">
                <el-col :span="2" style="border: 1px solid #edf0f4; border-bottom: none; text-align: center; padding: 5px; height: 100%; font-size: 15px; line-height: 30px; color: #13ce66;">
                    {{ distributionSwitch? '分销列表': '功能介绍' }}
                </el-col>
                <el-col :span="22" style="display: flex; justify-content: flex-end; border-bottom: 1px solid #edf0f4; height: 100%;">
                    <el-button v-show="distributionSwitch" v-permission="['distribution.add']" style="margin-right: 18px;margin-bottom: 5px" type="primary" plain size="mini" @click="showDistribution">添加规则
                    </el-button>
                </el-col>
            </el-row>

            <!-- 说明 -->
            <div v-show="!distributionSwitch">
                <h3>产品介绍</h3>
                <p>1.默认分销设置指，没有指单品分销政策的商品统一走默认设置</p>
                <p>2.支持二维分销功能</p>
                <p>3.支持代理佣金功能</p>
                <p>4.支持消费赠送金币</p>
                <h3>开通说明</h3>
                <p>1.开通分销后，只要成功推荐好友购买，即可获取等值金币</p>
                <p>2.金币兑换比例为 100金币=1元</p>
                <p>3.金币可用于购买商城等价商品，不设上限，全场通用</p>
                <p>4.金币满10元即可提现至微信钱包，免手续费、提现秒到账</p>
            </div>

            <!-- 列表 -->
            <el-table v-show="distributionSwitch" v-loadMore="[payLoads,'DistributionList']" :height="curHeight" :data="tableData" stripe style="width: 100%">

                <el-table-column prop="name" label="名称" />
                <el-table-column label="是否统计绩效">
                    <template slot-scope="scope">
                        <span>{{scope.row.isAchieve==true?'是':'否'}}</span>

                    </template>
                </el-table-column>
                <el-table-column label="是否开启直播">
                    <template slot-scope="scope">
                        <span>{{scope.row.liveRate>0?'是':'否'}}</span>

                    </template>
                </el-table-column>
                <el-table-column prop="given" label="赠送购物券%" />

                <el-table-column label="类型">
                    <template slot-scope="scope">
                        <span>
                            {{ scope.row.type | watchType }}
                        </span>
                    </template>
                </el-table-column>

                <el-table-column :key="Math.random()" fixed="right" align="center" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button v-permission="['distribution.edit']" type="text" size="small" @click="editHandleClick(scope.row)">编辑
                        </el-button>
                        <el-button v-permission="['distribution.del']" type="text" size="small" @click="delHandleClick(scope.row)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>

            <pagination v-show="distributionSwitch && total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" @pagination="getList" />

            <!-- 弹窗 -->
            <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px" :before-close="handleClose">
                <el-form ref="distributionForm" :rules="rules" :model="form" label-width="100px">
                    <div style="display: flex">
                        <el-form-item label="规则名称" prop="name" align="left">
                            <el-input v-model="form.name" style="width: 277px" />
                        </el-form-item>
                    </div>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="基础设置" name="basis">
                          <el-form-item  label="奖金类型" label-width="90px" style="margin-left: 10px">
                          <el-select v-model="form.type" placeholder="奖金类型" style="width: 120px">
                            <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                          </el-select>
                          </el-form-item>

                          <el-form-item  label="启用绩效" label-width="90px" style="margin-left: 10px">
                            <div style="display: flex; align-items: center;height: 36px">
                              <el-switch v-model="form.isAchieve" active-color="#13ce66" inactive-color="#ff4949" @change="switchClick">
                              </el-switch>
                              <div style="padding-left: 20px; font-weight: 500; line-height: 1.5em">启用绩效的商品，才会统计推广绩效</div>
                            </div>
                          </el-form-item>

                           <el-form-item label="店长奖励" prop="shopRate">
                                <div style="display: flex">
                                    <el-input v-model="form.shopRate" style="width: 80px" type="number" oninput="if(value>100)value=100" />
                                    <span style="padding-left: 5px">%</span>
                                    <div style="padding-left: 20px;padding-top:10px;font-weight:500;line-height: 1.5em">提货门店可获得奖励(代理商承担费用)</div>
                                </div>
                            </el-form-item>


                            <el-form-item label="主播奖励" label-width="90px" style="margin-left: 10px">
                              <div style="display: flex">
                                <el-input v-model="form.liveRate" style="width: 80px" type="number" oninput="if(value>100)value=100" />
                                <span style="padding-left: 5px">%</span>
                                <div style="padding-left: 20px;padding-top:10px;font-weight:500;line-height: 1.5em">主播推广可获得奖励(代理商承担费用)</div>
                              </div>
                            </el-form-item>


                          <el-form-item label="分红奖励" label-width="90px" style="margin-left: 10px">
                            <div style="display: flex">
                              <el-input v-model="form.stockRightRate" style="width: 80px" type="number" oninput="if(value>100)value=100" />
                              <span style="padding-left: 5px">%</span>
                              <div style="padding-left: 20px;padding-top:10px;font-weight:500;line-height: 1.5em">拥有分红权获得分红奖励(由公司承担费用)</div>
                            </div>
                          </el-form-item>

                        </el-tab-pane>
                        <el-tab-pane label="分销设置" name="Distribution">
                            <el-row :span="12" style="display: flex; justify-content: space-between">
                                <el-col :span="12">

                                    <el-table border :data="form.itemList">
                                        <el-table-column label="名称" align="center">
                                            <template slot-scope="{row,column,$index}">
                                                <span>{{row.name}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="直推奖 %" align="center" width="90px">
                                            <template slot-scope="{row}">
                                                <el-input type="number" v-model="row.percent1" oninput="if(value>100)value=100"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="间推奖 %" align="center" width="90px">
                                            <template slot-scope="{row}">
                                                <el-input type="number" v-model="row.percent2" oninput="if(value>100)value=100"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="直推券 %" align="center" width="90px">
                                            <template slot-scope="{row}">
                                                <el-input type="number" v-model="row.couponPercent1" oninput="if(value>100)value=100"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="间推券 %" align="center" width="90px">
                                            <template slot-scope="{row}">
                                                <el-input type="number" v-model="row.couponPercent2" oninput="if(value>100)value=100"></el-input>
                                            </template>
                                        </el-table-column>

                                    </el-table>
                                </el-col>
                                <!--                  备注-->
                                <div style="display: flex; align-items: flex-start; flex-direction: column; padding: 0 10px; width: 320px">
                                    <div style="padding: 10px 0; color: rgb(144, 147, 153); font-weight: bold">
                                        <span>备注说明</span>
                                    </div>
                                    <div style="padding: 10px 0; font-weight: 500; line-height: 1.5em">
                                        <span>
                                            直推奖: 本人推荐的客户下单
                                        </span>
                                    </div>
                                    <div style="padding: 10px 0; font-weight: 500; line-height: 1.5em">
                                        <span>
                                            间推奖: 本人的下级推荐的客户下单
                                        </span>
                                    </div>
                                </div>

                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="代理设置" name="proxy">
                            <el-row :span="12" style="display: flex; justify-content: space-between">
                                <el-col :span="12">
                                    <el-table border :data="form.itemList">
                                        <el-table-column label="名称" align="center">
                                            <template slot-scope="{row,column,$index}">
                                                <span>{{row.name}}</span>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="代理奖 %" :key="3" align="center" width="113px">
                                            <template slot-scope="{row}">
                                                <el-input type="number" v-model="row.agent1" oninput="if(value>100)value=100"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="同级奖 %" align="center" width="113px">
                                            <template slot-scope="{row}">
                                                <el-input type="number" v-model="row.peerRate" oninput="if(value>100)value=100"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="越级奖 %" align="center" width="113px">
                                            <template slot-scope="{row}">
                                                <el-input type="number" v-model="row.transcendRate" oninput="if(value>100)value=100"></el-input>
                                            </template>
                                        </el-table-column>

                                    </el-table>
                                </el-col>
                                <div style="display: flex; align-items: self-start; flex-direction: column; padding: 0 10px; width: 320px">
                                    <div style="padding: 10px 0; color: rgb(144, 147, 153); font-weight: bold">
                                        <span>备注说明</span>
                                    </div>
                                    <div style="padding: 10px 0; font-weight: 500; line-height: 1.5em">
                                        <span>
                                            代理奖: 期下所有客户下单都可得代理差价
                                        </span>
                                    </div>
                                </div>
                            </el-row>
                        </el-tab-pane>
                        <el-tab-pane label="共享店铺" name="Dividends">
                            <el-row :span="9" style="display: flex; justify-content: space-between">
                                <el-col :span="9">
                                    <el-table border :data="form.itemList">
                                        <el-table-column label="名称" align="center">
                                            <template slot-scope="{row,column,$index}">
                                                <span>{{row.name}}</span>
                                            </template>
                                        </el-table-column>
                                      <el-table-column label="推广分红 %" :key="4" align="center"  width="113px">
                                        <template slot-scope="{row}">
                                          <el-input type="number" v-model="row.pushStockRight" oninput="if(value>1000)value=100"></el-input>
                                        </template>
                                      </el-table-column>
                                      <el-table-column label="消费分红 %" :key="4" align="center"  width="113px">
                                        <template slot-scope="{row}">
                                          <el-input type="number" v-model="row.stockRight" oninput="if(value>1000)value=100"></el-input>
                                        </template>
                                      </el-table-column>
                                      <el-table-column label="基金分红 %" :key="4" align="center"  width="113px">
                                        <template slot-scope="{row}">
                                          <el-input type="number" v-model="row.stockFundRight" oninput="if(value>1000)value=100"></el-input>
                                        </template>
                                      </el-table-column>
                                        <el-table-column label="基金奖 %" :key="4" align="center"  width="113px">
                                            <template slot-scope="{row}">
                                                <el-input type="number" v-model="row.bonusRate" oninput="if(value>100)value=100"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="管理奖 %" :key="6"  width="113px">
                                            <template slot-scope="{row}">
                                            <el-input type="number" v-model="row.warehouseRate" oninput="if(value>100)value=100"></el-input>
                                        </template>
                                      </el-table-column>
                                    </el-table>
                                </el-col>
                                 <div style="display: flex; align-items: flex-start; flex-direction: column; padding: 0 10px; width: 400px">
                                    <div style="padding: 10px 0; color: rgb(144, 147, 153); font-weight: bold">
                                        <span>备注说明</span>
                                    </div>
                                   <div style="padding: 10px 0; font-weight: 500; line-height: 1.5em">
                                        <span>
                                            推广分红: 推荐好友购买商品可获取分红权
                                        </span>
                                   </div>
                                   <div style="padding: 10px 0; font-weight: 500; line-height: 1.5em">
                                        <span>
                                            消费分红: 购买商品可获取对应比例的分红权
                                        </span>
                                   </div>
                                    <div style="padding: 10px 0; font-weight: 500; line-height: 1.5em">
                                        <span>
                                            基金奖: 销售额比例进入基金池,按分红权发放
                                        </span>
                                    </div>
                                   <div style="padding: 10px 0; font-weight: 500; line-height: 1.5em">
                                        <span>
                                            管理奖: 快递落地所在地的加盟商可获管理奖
                                        </span>
                                   </div>
                                </div>

                            </el-row>
                        </el-tab-pane>
                    </el-tabs>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="resetForm('distributionForm')">取 消</el-button>
                    <el-button type="primary" :loading="saveClicked" @click="saveDistribution('distributionForm')">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>
<script>
import permission from "@/directive/permission/index.js"; // 权限判断指令
import loadMore from "@/utils/loadMore.js";
import { list, save, del, update, find } from "@/api/distribution.js";
import Pagination from "@/components/Pagination";
import { list as vipList } from "../../api/vip";
import { getInfo, list as sysMchList } from "@/api/sysMch";
export default {
    name: "DistributionList",
    directives: { permission, loadMore },
    components: {
        Pagination,
    },
    filters: {
        watchType(val) {
            if (val == 0) {
                return "市场价";
            } else
            if (val == 1) {
              return "销售价";
            } else{
                return "毛利";
            }
        },
    },
    data() {
        return {
            newliveRate: 0,
            live: false,
            activeName: "basis",
            value: true,
            curHeight: null,
            mchIdOptions: [],
            mchType: "",
            queryType: false,
            distributionSwitch: true,
            dialogVisible: false,
            dialogTitle: "",
            pageNum: 1,
            pageSize: 20,
            total: 0,
            query: {
               name: "",
            },
          typeList: [
            {
              value: 0,
              label: "市场价",
            },
            {
              value: 1,
              label: "销售价",
            },
            {
              value: 2,
              label: "毛利",
            },
          ],
            form: {
                id: "",
                agent1: "0",
                given: "0",
                name: "",
                percent1: "0",
                percent2: "0",
                type: 0,
                bonusRate: "0",
                status: 0,
                againRate: "100",
                isAchieve: false,
                stockRightRate: false,
                liveRate: 0,
                peerRate: 0,
                itemList: [],
            },
            requests: "",
            tableData: [],
            vipForm: [],
            // typeOptions: [{ value: 0, label: '默认设置' }, { value: 1, label: '单品设置' }],
            clicked: false, // 按钮防双击
            saveClicked: false,
            rules: {
                name: [
                    { required: true, message: "请输入名称", trigger: "blur" },
                ],
                given: [
                    {
                        required: true,
                        message: "请输入赠送购物券",
                        trigger: "blur",
                    },
                ],
                againRate: [
                    {
                        required: true,
                        message: "请输入复购比例",
                        trigger: "blur",
                    },
                ],
                shopRate: [
                    {
                        required: true,
                        message: "请输入店主比例",
                        trigger: "blur",
                    },
                ],
            },
            payLoads: "",
        };
    },
    watch: {},
    created() {
        this.loadSysmch("");
        this.loadMch();
        this.getList();
        this.comeIn();
        this.beforeMount();
        this.loadVip();
    },
    mounted() {},
    activated() {
        this.payLoads = new Date().getTime();
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        loadSysmch(query) {
            sysMchList({ name: query })
                .then((res) => {
                    this.mchIdOptions = res.data.data.filter((val) => {
                        return val.mchType === 3 || val.mchType === 1;
                    });
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        changeSysMch() {
            this.getList();
        },
        querySysmch(query) {
            this.loadSysmch(query);
        },
        loadMch() {
            getInfo().then((res) => {
                this.mchType = res.data.mchType;
            });
        },
        distributionSwitchFn() {
            if (this.tableData.length === 0) {
                // 如果数据为空则需要添加一条数据
                this.showDistribution();
            } else {
                let statusText =
                    this.distributionSwitch == true ? "关闭" : "开启";
                this.$confirm(
                    "此操作将" + statusText + "分销功能, 是否继续?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                    .then(() => {
                        this.form = this.tableData[0]; // 获取第一条数据
                        this.form.status =
                            this.distributionSwitch == true ? 1 : 0; // 判断当前状态
                        update(this.form)
                            .then((res) => {
                                console.log(res);
                                this.getList();
                                this.$message({
                                    type: "success",
                                    message: "已" + statusText + "分销功能",
                                });
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                        this.distributionSwitch = !this.distributionSwitch;
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消" + statusText,
                        });
                    });
            }
        },
        beforeMount() {
            var _this = this;
            window.onresize = () => {
                return (() => {
                    if (this.queryType == true) {
                        var h =
                            document.documentElement.clientHeight ||
                            document.body.clientHeight;
                        _this.curHeight = h - 296; // 减去页面上固定高度height
                    } else {
                        var h =
                            document.documentElement.clientHeight ||
                            document.body.clientHeight;
                        _this.curHeight = h - 250; // 减去页面上固定高度height
                    }
                })();
            };
        },
        comeIn() {
            console.log("222");
            var h =
                document.documentElement.clientHeight ||
                document.body.clientHeight;
            this.curHeight = h - 250; // 减去页面上固定高度height
        },
        getList() {
            // 获取数据
            const params = new URLSearchParams();
            params.append("name", this.query.name);
            params.append("mchId", this.query.sysMchId);
            params.append("pageNum", this.pageNum);
            params.append("pageSize", this.pageSize);
            list(params)
                .then((res) => {
                    console.log(res);
                    this.sortClick(res.data.data, "id");

                    this.distributionSwitch = true;

                    this.tableData = res.data.data;
                    this.total = res.data.total;
                    this.pageNum = res.data.pageable.pageNum;
                    this.pageSize = res.data.pageable.pageSize;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        handleClose(done) {
            // 关闭弹窗
            this.$confirm("确认关闭？")
                .then((_) => {
                    this.$refs.distributionForm.resetFields();
                    this.getList();
                    done();
                })
                .catch((_) => {});
        },
        showDistribution() {
            // 弹窗
            var _this = this;
            _this.form.itemList = [];
            this.dialogTitle = "添加规则";
            if (_this.vipForm.length > 0) {
                this.form.id = "";
                this.form.name = "";
                this.form.given = "0";

                this.form.status = 0;
                this.live = false;
                _this.vipForm.forEach(function (item) {
                    var itemList = {
                        percent1: 0,
                        percent2: 0,
                        agent1: 0,
                        stockRight:0,
                        bonusRate: 0,
                        againRate: 0,
                        peerRate: 0,
                        transcendRate: 0,
                        id: "",
                        vipId: item.id,
                        vip: item.vip,
                        name: item.name,
                        warehouseCoupon: "false",
                        warehouseRate: "0",
                    };
                    _this.form.itemList.push(itemList);
                });
                _this.sortClick(_this.form.itemList, "vip");
                this.form.isAchieve = false;
                this.requests = "save";
                console.log(this.form.liveRate);
                console.log("设置直播");
            } else {
                _this.$message({
                    type: "info",
                    message: "请先设置客户等级",
                });
                return;
            }
            if (this.tableData.length === 0) {
                // 第一次开启
                this.$confirm(
                    "开启分销功能需要添加一条分销规则, 是否继续?",
                    "提示",
                    {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    }
                )
                    .then(() => {
                        this.$message({
                            type: "success",
                            message: "请先添加一条规则",
                        });
                        this.dialogVisible = true;
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "开启失败",
                        });
                    });
            } else {
                if (_this.vipForm.length > 0) {
                    this.dialogVisible = true;
                } else {
                    _this.$message({
                        type: "info",
                        message: "请先设置客户等级",
                    });
                }
            }
        },
        saveDistribution(formName) {
            ``; // 添加规则
            var _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 校验表单
                    this.saveClicked = true;
                    const date = new Date();
                    this.form.modifyDate = date;
                    this.form.status = 0;
                    if (this.form.itemList.length > 0) {
                        _this.form.percent1 = _this.form.itemList[0].percent1;
                        _this.form.percent2 = _this.form.itemList[0].percent2;
                        _this.form.bonusRate = _this.form.itemList[0].bonusRate;
                        _this.form.peerRate = _this.form.itemList[0].peerRate;
                        _this.form.itemList.forEach(function (item) {
                            item.id = _this.form.id;
                            item.againRate = _this.form.againRate;
                            _this.$delete(item, "vip");
                            _this.$delete(item, "name");
                        });
                    }

                    let request;
                    if (this.requests == "save") {
                        request = save;
                    } else if (this.requests == "update") {
                        request = update;
                    }
                    request(this.form)
                        .then((response) => {
                            console.log(response);
                            this.saveClicked = false;
                            this.resetForm(formName);
                            this.getList();
                        })
                        .catch((error) => {
                            this.saveClicked = false;
                        });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            // 清空列表
            this.dialogVisible = false;
            this.$refs[formName].resetFields();
        },
        editHandleClick(data) {
            // 修改规则
            var _this = this;
            find(data.id)
                .then((res) => {
                    _this.form = res.data.distribution;
                    if (_this.form.liveRate > 0) {
                        _this.live = true;
                    } else {
                        _this.live = false;
                    }
                    var itemList = [];
                    _this.form.itemList.forEach(function (item, index) {
                        _this.vipForm.forEach(function (items) {
                            console.log(item.vipId);
                            console.log("9999999");
                            if (item.vipId == items.id) {
                                console.log("我进来一次");
                                item.name = items.name;
                                itemList.push(item);
                            }
                        });
                    });
                    let temporary = [];
                    _this.vipForm.forEach(function (item) {
                        var itemListarray = {
                            percent1: 0,
                            percent2: 0,
                            agent1: 0,
                            bonusRate: 0,
                            againRate: 0,
                            stockRight:0,
                            peerRate: 0,
                            transcendRate: 0,
                            couponPercent1: 0,
                            couponPercent2: 0,
                            id: "",
                            vipId: item.id,
                            vip: item.vip,
                            name: item.name,
                            warehouseCoupon: "false",
                            warehouseRate: "0",
                        };
                        temporary.push(itemListarray);
                    });
                    console.log("99999999999999s");
                    console.log("分销11111111");
                    itemList = itemList.concat(temporary);
                    for (var i = 0; i < itemList.length; i++) {
                        for (var j = i + 1; j < itemList.length; j++) {
                            if (itemList[i].name == itemList[j].name) {
                                itemList.splice(j, 1);
                                j--;
                            }
                        }
                    }
                    _this.form.itemList = itemList;
                    _this.requests = "update";
                    _this.dialogTitle = "修改规则";
                    _this.dialogVisible = true;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        delHandleClick(data) {
            // 删除规则
            this.$confirm("此操作将永久删除该规则, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    del(data.id)
                        .then((res) => {
                            console.log(res);
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getList();
                        })
                        .catch((err) => {
                            console.log(err);
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        switchClick(data) {
            console.log(data);
            if (data == false) {
                this.form.liveRate = 0;
            } else {
                this.form.liveRate = this.form.liveRate;
            }
            console.log(this.form.liveRate);
        },
        liveinput(val) {
            console.log(val);
            console.log(val === 0);
            if (val === 0) {
                this.live = false;
            }
        },
        loadVip() {
            var _this = this;
            let params = new URLSearchParams();
            vipList(params)
                .then((response) => {
                    console.log(response);
                    console.log("会员list11111111111111");
                    _this.vipForm = response.data.data;
                })
                .catch((error) => {
                    console.log("error!!");
                });
        },
        sortClick(array, key) {
            return array.sort(function (a, b) {
                var x = a[key];
                var y = b[key];
                return x < y ? -1 : x > y ? 1 : 0;
            });
        },
    },
};
</script>

<style scoped lang="scss">
/deep/.el-dialog__body {
    padding: 0 20px;
}

/deep/.el-table .cell {
    line-height: 1em;
}

/deep/.el-radio__label {
    padding-left: 5px;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.box-card {
    width: 100%;
    margin: 0 auto;
}
.el-col {
    width: 80%;
}
</style>
